<template>
    <div>
        <transition name="showGuide" appear>
            <div class="showImg"></div>
        </transition>
        <transition name="showGuide" appear>
            <div class="title">
                <span>论坛</span>
                <span>与树洞</span>
            </div>
        </transition>
        <transition name="showGuide" appear>
            <div class="intro">
                <p>分享经验 发泄情绪 有人陪你一起~</p>
            </div>
        </transition>
        <div class="location"></div>
        <div class="goon" @click="forward">
            <span>继续</span>
        </div>
    </div>
</template>

<script>
    export default {
        name:'secondGuide',
        methods:{
            forward(){
                this.$router.replace({
                    name:'third'
                })
            }
        }
    }
</script>

<style scoped>
    .showImg{
        background-image: url(../assets/img/show@2x/show3.png);
        width: 5.96rem;
        height: 7.12rem;
        background-position: center;
        background-size: contain;
        margin: 0 auto;
        margin-top: 2.8rem;
        background-repeat: no-repeat;
    }
    .title{
        position: absolute;
        top: 8.78rem;
        left: 0.88rem;
        font-size: .96rem;
        font-family: PingFangSC-Mediuem;
        color:#333333;
        display: flex;
        flex-direction: column;
    }
    .intro{
        position: absolute;
        left: .88rem;
        top: 11.88rem;
        color:#999999;
        font-size: 0.28rem;
        font-family: PingFangSC-Regular;
    }
    .location{
        background-image: url(../assets/img/0-icon@2x/0-4location.png);
        width: .86rem;
        height: .12rem;
        background-position: center;
        background-size: contain;
        position: absolute;
        left: 3.32rem;
        top: 12.7rem;
    }
    .goon{
        width: 3.28rem;
        height: .88rem;
        background: linear-gradient(30deg,#22A2FC,#2A82E4);
        border-radius: .88rem;
        position: absolute;
        left: 0.88rem;
        bottom: 1.74rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF;
        font-size: 0.28rem;
        font-family: PingFangSC-Mediuem;
    }
</style>